<!DOCTYPE html>
<html lang="en">
<head>
    <title>mapbox</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/mapbox-gl.js"></script>
    <style>
        .mapboxgl-ctrl-scale {
            font-size: 12px;
            text-align: center;
            font-weight: bold;
            border: 3px solid red;
            color: red;
            border-top: none;
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,0);
        }

        .my-mouse-position {
            font-size: 12px;
            font-weight: bold;
            color: red;
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }
    </style>
</head>
<body>
<div id="map" class="map">
    <div class="my-mouse-position" id="mousePosition"></div>
</div>
<script>
    const timeStart = Date.now()
    let time
    var style = {
        "version": 8,
        "name": "Mapbox Streets",
        "sources": {
            "amap-tile": {
                "type": "raster",
                "scheme": "xyz",
                "tiles": ['http://localhost:8081/amap512/{z}/{x}/{y}.png'],
                "tileSize": 256
            }
        },
        "layers": [
            {
                "id": "amap-tile",
                "type": "raster",
                "source": "amap-tile",
                "minzoom": 0,
                "maxzoom": 17,
                "layout": {
                    "visibility": "visible"
                }
            }
        ]
    }
    var map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
        container: 'map', // container ID
        style: style,
        center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]
        zoom: 4
    });
map.on('load', () => {
    map.on('mousemove', e => {
        const {lng, lat} = e.lngLat
        document.getElementById('mousePosition').innerText = [lng, lat].map(i => i.toFixed(4)).join(',')
    })


    const nav = new mapboxgl.NavigationControl({
        showCompass: true,
        showZoom: true,
        visualizePitch: true
    });
    map.addControl(nav, 'top-left');

    const scale = new mapboxgl.ScaleControl({
        maxWidth: 100,
        unit: 'metric'
    });
    map.addControl(scale);

    const tile = "http://localhost:8081/geoserver/gwc/service/tms/1.0.0/mapbox%3Aprovince@EPSG%3A900913@png/{z}/{x}/{y}.png";
    map.addSource('tms-test-source', {
        "type": "raster",
        "scheme": "tms",
        "tiles": [tile],
        "tileSize": 256
    })
    map.addLayer({
        'id': 'tms-test-layer',
        'type': 'raster',
        'source': 'tms-test-source',
        'paint': {
            'raster-opacity': 0.6
        }
    });
});
</script>
</body>
</html>